.wrapper{
    width: 50%;
    height: 200px;
    border: 1px solid #ac0039;
    }
    
    /* display属性 */
    .layout2 li{
    display: inline;
    }
    
    .layout2 span{
        display: block;
    }
    
    .layout2 p{
        display: inline-block;
    }
    
    
    /* 弹性盒子 */
    .layout3{
        display:flex;
        flex-direction: row;
    }
    
    .layout3 > div{
    background-color: green;
    margin-left: 10px;
    flex: 1;
    }
    
    
    /* 网格 */
    .layout4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        grid-template-rows: 75px 75px;
        grid-gap: 5px;
    }
    
    .layout4 > div{
        background: rgb(243,83,222);
        border-radius: 5px;
    }
    
    .layout5{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        grid-template-rows: 75px 75px;
        grid-gap: 5px;
    }
    
    .layout5 > div{
        background: rgb(243,83,222);
        border-radius: 5px;
    }
    
    .layout5 .box1{
        grid-column: 2/4;
        grid-row: 1;
    }
    
    .layout5 .box2{
    grid-column: 1;
    grid-row: 1/3;
    }
    
    .layout5 .box3{
        grid-column: 3;
        grid-row: 2;
    }
    
    
    /* 浮动 */
    
    .layout6 > div{
    float: left;
    background: rgb(126, 126, 37);
    border-radius: 5px;
    margin: 5px;
    }
    
    .layout6 .box2{
        float: right;
    }
    
    
    
    /* 定位 */
    .layout7{
        position: relative;
    }
    
    .layout7 > div{
    background: rgb(0, 153, 255);
    border-radius: 5px;
    margin: 5px;
    }
    
    .layout7 .box2{
     position: relative;
     left: 0;
     top: 50px;
    }
    .layout7 .box3{
        position: absolute;
        left: 0;
        top: 100px;
    }
    /* CSS表格布局 */
    
    .layout8{
        display: table;
        border-collapse: separate;
        border-spacing: 5px;
    }
    
    .layout8 > div{
        display: table-row;
    }
    
    .layout8 label, .layout8 input{
        display: table-cell;
    }
    .layout8 label{
        width: 100px;
        text-align: right;
        padding-right: 10px;
    }
    
    .layout8 input{
        width: 200px;
    }
    
    .layout8 p{
        display: table-caption;
        caption-side: bottom;
        text-align: center;
    }
    
    /* 多列布局 */
    .layout9{
    /* column-count: 2; */
    column-width: 100px;
    }